<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script src="../../static/js/jquery-3.3.1.min.js"></script>
    <script src="../../static/js/vue.js"></script>
    <script src="../../static/js/utils.js"></script>
    <!-- 引入样式 -->
    <link rel="stylesheet" href="https://unpkg.com/element-ui/lib/theme-chalk/index.css">
    <!-- 引入组件库 -->
    <script src="https://unpkg.com/element-ui/lib/index.js"></script>
</head>
<style>
    .el-row {
        margin-bottom: 20px;

        &:last-child {
            margin-bottom: 0;
        }
    }

    .el-col {
        border-radius: 4px;
    }

    #app {
        width: 94%;
        margin-left: 2%;
        text-align-last: center;
    }
</style>

<body>
    <div id="app">
        <el-dialog title="审核反馈" :visible.sync="dialogFormVisible">
            <el-form>
                <el-form-item label="反馈信息">
                    <el-input v-model="feedbackInfo" placeholder="请输入反馈信息" autocomplete="off"></el-input>
                </el-form-item>
            </el-form>
            <div slot="footer" class="dialog-footer">
                <el-button @click="dialogFormVisible = false">取 消</el-button>
                <el-button type="primary" @click="submit">确 定</el-button>
            </div>
        </el-dialog>
        <div v-show="table1">
            <el-row :gutter="20">
                <el-col :span="12" :offset="8">
                    <h1 style="color: rgb(78, 78, 250);margin-left: -30%;">审核采购计划</h1>
                </el-col>
            </el-row>

            <el-table :data="tableData" style="width: 100%;height: 330px;">
                <el-table-column prop="requestBuyer" label="采购申请人">
                </el-table-column>
                <el-table-column prop="requestTime" label="采购申请时间">
                    <template slot-scope="scope">
                        {{ new Date(scope.row.requestTime).toLocaleDateString() }}
                    </template>
                </el-table-column>
                <el-table-column prop="totalPrice" label="总金额">
                </el-table-column>
                <el-table-column label="采购详情" width="200">
                    <template slot-scope="scope">
                        <el-button @click="details(1,scope.$index,tableData)" type="text" size="small">详情</el-button>
                    </template>
                </el-table-column>
                <el-table-column prop="" label="审核通过" width="" align='center'>
                    <template slot-scope="scope">
                        <i class="el-icon-success" @click="add(0,scope.$index,tableData)"
                            style="color: #27cb27;font-size: 20px;"></i>
                    </template>
                </el-table-column>
                <el-table-column prop="" label="审核不通过" width="" align='center'>
                    <template slot-scope="scope">
                        <i class="el-icon-error" @click="add(2,scope.$index,tableData)"
                            style="color: red;font-size: 20px;"></i>
                    </template>
                </el-table-column>
            </el-table>
            <div class="block">
                <el-pagination @size-change="handleSizeChange" @current-change="handleCurrentChange"
                    :current-page="currentPage1" :page-sizes="[5, 10, 15, 20]" :page-size="100"
                    layout="total, sizes, prev, pager, next, jumper" :total="total">
                </el-pagination>
            </div>
        </div>
        <div v-show="table2">
            <el-row :gutter="20">
                <el-col :span="12" :offset="8">
                    <h1 style="color: rgb(78, 78, 250);">采购详情</h1>
                </el-col>
            </el-row>
            <el-row :gutter="20">
                <el-col :span="6">
                    申请人：{{requestBuyer}}
                </el-col>
                <el-col :span="6" :offset="2">
                    申请日期：{{new Date(requestTime).toLocaleDateString()}}
                </el-col>
                <el-col style="margin-left: 30%" :span="2">
                    <el-button @click="back" type="text" size="medium">返回</el-button>
                </el-col>
            </el-row>

            <el-table :data="tableData3" style="width: 100%;height: 330px">
                <el-table-column prop="partcode" label="零件编号">
                </el-table-column>
                <el-table-column prop="partname" label="零件名称">
                </el-table-column>
                <el-table-column prop="partplacecode" label="货位号">
                </el-table-column>
                <el-table-column prop="partunit" label="单位">
                </el-table-column>
                <el-table-column prop="producername" label="生产商">
                </el-table-column>
                <el-table-column prop="buycount" label="采购数量">
                </el-table-column>
            </el-table>
            <div class="block">
                <el-pagination @size-change="handleSizeChange" @current-change="handleCurrentChange"
                    :current-page="currentPage1" :page-sizes="[5, 10, 15, 20]" :page-size="100"
                    layout="total, sizes, prev, pager, next, jumper" :total="total">
                </el-pagination>
            </div>
        </div>
    </div>
</body>
<script>
    new Vue({
        el: "#app",
        data: {
            id: 0,
            userId: 0,
            page: 1,
            limit: 5,
            total: 0,
            currentPage1: 1,
            tableData: [],
            tableData3: [],
            table1: true,
            table2: false,
            status: 0,
            requestBuyer: '',
            requestTime: '',
            dialogFormVisible: false,
            feedbackInfo: ''
        },
        methods: {
            select() {
                let _this = this;
                selectAjax("post", '/buytable/list', { state: '2', page: _this.page, limit: _this.limit }, _this.tableData2);
            },
            selectDetails() {
                let _this = this;
                selectAjax("post", '/buytable/details', { id: _this.id, state: '2', page: _this.page, limit: _this.limit }, _this.tableData4);
            },
            tableData2(data) {
                this.tableData = data.data.data;
                this.total = data.data.total;
            },
            tableData4(data) {
                this.tableData3 = data.data.data;
                this.total = data.data.total;
            },
            handleSizeChange(val) {
                this.limit = val;
                if (this.status == 0) {
                    this.select();
                } else if (this.status == 1) {
                    this.selectDetails();
                }
            },
            handleCurrentChange(val) {
                this.page = val;
                if (this.status == 0) {
                    this.select();
                } else if (this.status == 1) {
                    this.selectDetails();
                }
            },
            closePage() {
                this.page = 1;
                this.limit = 5;
                this.total = 0;
                this.currentPage1 = 1;
            },
            details(state, index, data) {
                this.requestBuyer = data[index].requestBuyer;
                this.requestTime = data[index].requestTime;
                this.id = data[index].id;
                this.closePage();
                if (state == 1) {
                    this.status = 1;
                    this.table1 = false;
                    this.table2 = true;
                    this.selectDetails();
                }
            },
            back() {
                this.status = 0;
                this.table1 = true;
                this.table2 = false;
                this.select();
                this.closePage();
            },
            add(state, i, data2) {
                let _this = this;
                _this.userId = localStorage.getItem("id");
                _this.id = data2[i].id;

                if (state == 2) {
                    _this.dialogFormVisible = true;
                    _this.feedbackInfo = ''
                } else if (state == 0) {
                    _this.$confirm('确认审核成功吗?', '提示', {
                        confirmButtonText: '确定',
                        cancelButtonText: '取消',
                        type: 'warning'
                    }).then(() => {
                        _this.$message({
                            type: 'success',
                            message: '审核成功!'
                        });

                        $.ajax({
                            type: "post",
                            url: "http://localhost:8080/carSales/buytable/updateState",
                            data: {
                                id: _this.id,
                                state: '0',
                                userId: _this.userId,
                            },
                            dataType: "json",
                            beforeSend: function (request) {
                                request.setRequestHeader("Authentication", token);
                                _this.feedbackInfo = ''
                            },
                            success: function (data) {
                                if (data.code == '401') {
                                    alert("登录过期，请重新登录")
                                    window.location.href = "../login/login.html";
                                } else if (data.code == '200') {
                                    data2.splice(i, 1);
                                    _this.total--;
                                } else if (data.code == '500') {
                                    alert(data.msg)
                                }
                            },
                        })
                    }).catch(() => {
                        _this.$message({
                            type: 'info',
                            message: '已取消审核'
                        });
                    });
                }
            },
            submit() {
                let _this = this;
                _this.dialogFormVisible = false;
                $.ajax({
                    type: "post",
                    url: "http://localhost:8080/carSales/buytable/updateInfo",
                    data: {
                        id: _this.id,
                        userId: _this.userId,
                        info: _this.feedbackInfo
                    },
                    dataType: "json",
                    beforeSend: function (request) {
                        request.setRequestHeader("Authentication", token);
                    },
                    success: function (data) {
                        if (data.code == '401') {
                            alert("登录过期，请重新登录")
                            window.location.href = "../login/login.html";
                        } else if (data.code == '200') {
                            _this.select();
                        } else if (data.code == '500') {
                            alert(data.msg)
                        }
                    },
                })
            }
        },
        mounted() {
            this.select();
        }
    })
</script>

</html>